<!doctype html>
<html>
  <head>
    <meta charset="utf-8" name="viewport" content="initial-scale=1,user-scalable=no" />
    <link rel="subresource" href="snow.svg" />
    <title>Merry Christmas</title>
    <style>
      @keyframs rotate{
        from { transform: rotate(0deg);}
        to { transform: rotate(360deg);}
      }
      @-webkit-keyframes rotate{
        from { transform: rotate(0deg);}
        to { transform: rotate(360deg);}
      }
      @-moz-keyframes rotate{
         from { transform: rotate(0deg);}
        to { transform: rotate(360deg);}
      }
      @-ms-keyframes{
         from { transform: rotate(0deg);}
        to { transform: rotate(360deg);}
      }
      @-o-keyframes{
         from { transform: rotate(0deg);}
        to { transform: rotate(360deg);}
      }

      @keyframes snowRotate {
        from {
          transform: rotate(0);
        }
        to {
          transform: rotate(360deg);
        }
      }
      @-webkit-keyframes snowRotate {
        from {
          -webkit-transform: rotate(0);
        }
        to {
          -webkit-transform: rotate(360deg);
        }
      }
      @-moz-keyframes snowRotate {
        from {
          -moz-transform: rotate(0);
        }
        to {
          -moz-transform: rotate(360deg);
        }
      }
      @keyframes snowMove {
        form {
          top: 0%;
        }
        to {
          top: 100%;
        }
      }
      @-webkit-keyframes snowMove {
        form {
          top: 0%;
        }
        to {
          top: 100%;
        }
      }
      @-moz-keyframes snowMove {
        form {
          top: 0%;
        }
        to {
          top: 100%;
        }
      }
      @-webkit-keyframes textRotate {
        from {
          -webkit-transform: perspective(500) rotate3d(0, 1, 0, 0);
          color: green;
        }
        20% {
          -webkit-transform: perspective(500) rotate3d(0, 1, 0, 360deg);
          color: yellow;
        }
        40% {
          -webkit-transform: perspective(500) rotate3d(1, 0, 0, 0deg);
        }
        60% {
          -webkit-transform: perspective(500) rotate3d(1, 0, 0, 360deg);
          color: green;
        }
        80% {
          -webkit-transform: perspective(500) rotate3d(0, 0, 1, 0deg);
        }
        to {
          -webkit-transform: perspective(500) rotate3d(0, 0, 1, 360deg);
          color: yellow;
        }
      }
      @-moz-keyframes textRotate {
        from {
          -moz-transform: perspective(500) rotate3d(0, 1, 0, 0);
          color: green;
        }
        20% {
          -moz-transform: perspective(500) rotate3d(0, 1, 0, 360deg);
          color: yellow;
        }
        40% {
          -moz-transform: perspective(500) rotate3d(1, 0, 0, 0deg);
        }
        60% {
          -moz-transform: perspective(500) rotate3d(1, 0, 0, 360deg);
          color: green;
        }
        80% {
          -moz-transform: perspective(500) rotate3d(0, 0, 1, 0deg);
        }
        to {
          -moz-transform: perspective(500) rotate3d(0, 0, 1, 360deg);
          color: yellow;
        }
      }
      
      body {
        width: 100%;
        padding: 0;
        margin: 0;
        background: rgb(200, 0, 0);
      }
      h1 {
        font-size: 2rem;
        font-family: Times New Roman;
        max-width: 8em;
        text-shadow: .03em .03em .03em white,
        -.02em -.02em .02em black;
        text-align: center;
        margin: auto;
        margin-top: 100px;
        box-shadow: 0 -.1em .1em white;
        -webkit-animation: textRotate 24s linear infinite;
        -moz-animation: textRotate 24s linear infinite;
      }
      #container {
        width: 100%;
       

      }
      img {
        width: 10px;
        position: absolute;
        top: 0;
        transition: 5s linear;
        -webkit-transition: 5s linear;
        -moz-transition: 5s linear;
        animation: snowRotate 5s infinite alternate,
        snowMove 4s linear;
        -webkit-animation: snowRotate 5s infinite alternate,
        snowMove 4s linear;
        -moz-animation: snowRotate 5s infinite alternate,
        snowMove 4s linear;

      }
      #bottom {
        width: 100%;
        height: 30%;
        position: fixed;
        left: 0;
        bottom: 0;
        background: linear-gradient( rgb(200, 0, 0), white);
        background: -webkit-linear-gradient( rgb(200, 0, 0), white);
        background: -moz-linear-gradient( rgb(200, 0, 0), white);
      }
      
      #pic{
        display: block;
        position: fixed;
        overflow: hidden;
        width: 200px;
        height: 200px;    
        top: 50%;
        left: 50%;
        margin-top: -100px;
        margin-left: -100px;
        border-radius: 50%;
        border: 5px;
        border-color: pink;
        border-style: ridge;
        -webkit-animation: rotate 10s linear 0s infinite;
        -moz-animation: rotate 10s linear 0s infinite;
       
      }

      #but{
        position: fixed;
        width: 190px;
        height: 40px;
        left: 50%;
        bottom: 25%;
        margin-bottom: -20px;
        margin-left: -95px;
        background-color: pink;
        border-radius: 10px;
      }
      audio{
        display: none;
      }
      
    </style>

  </head>
  <body>
    <h1>Merry Christmas</h1>
    <div id="container"></div>
    <div id="bottom"></div>
    <embed id="pic" src="oldmen.svg" type="image/svg+xml" ></embed> 
    <button id="but"><a href="./3DphotoWall.html" style="text-decoration: none;font-family: '楷体';font-size: 1.5rem;color:black;">点我有惊喜哟！</a></button>
    <audio  autoplay="autoplay" preload="auto"  loop="loop" src="./music/jinglebells.mp3"></audio>
    
    <script>
      var w = innerWidth;
      var h = innerHeight;
      var container = document.querySelector('#container');
      var bottom = document.querySelector('#bottom');
      var snowImg = document.createElement('img');
      var snow_top = 0;
      var snow_left = 0;
      var count = 0;
      var snow_number = h / 3;
      
      snowImg.src = './snow.svg';
      var int1 = setInterval(function(){
        w = innerWidth,
        h = innerHeight;
        var snowTmpImg = snowImg.cloneNode();
        snow_left = Math.round(Math.random()*w) - 20;
        snowTmpImg.style.left = snow_left + 'px';
        snowTmpImg.style.width = Math.round(Math.random()*15) + 5 + 'px';
        container.appendChild(snowTmpImg);
        snowTmpImg.style.opacity = Math.round(Math.random()*10)/10;
        count++;
      }, 0);
      
      var int2 = setInterval(function(){
        if (container.childNodes.length > snow_number) {
          container.removeChild(container.
          childNodes[0]);
        }
      }, 0);
    </script>
   
  </body>
</html>